<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    在输入框上使用时：
    <div id="app">
        <input type="text" v-model="message" placeholder="输入...">
        <p>输入内容是：{{ message}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:''
            }
        })
    </script>
<br>
<br>
<br>




对于文本域textarea的用法 
    <div id="app">
        <textarea v-model="text" placeholder="输入..."></textarea>
            <p>输入内容是：</p>
            <p style="white-space:pre">{{ text }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    text:''
                }
            })
        </script>
<br>
<br>
<br>




使用v-model时：
        <div id="app">
            <input type="text" @input="handleInput" placeholder="输入...">
                    <p>输入内容是：{{ message}}</p>
                </div>
                <script src="https://cdn.jsdelivr.net/npm/vue"></script>
                <script>
                    var app = new Vue({
                        el:'#app',
                        data:{
                            message:''
                        },
                        methods:{
                            handleInput:function(e){
                                this.message = e.target.value;
                            }
                        }
                    })
                </script>
</body>
</html>